<template>
	<view>
		<custom-navbar :title="typeS==1?'变更居住地或工作单位':'重新填报'"></custom-navbar>
		<view class="main" :style="'padding-top:'+barHeight+'px'">
			<view class="typeClass flex align">
				<view>申报类型：</view>
				<view>{{type==1?'流出申报':'流入申报'}}</view>
			</view>
			<!-- 流出申报 -->
			<view class="card" v-if="type==1">
				<view class="input-item flex align">
					<view>姓名</view>
					<input placeholder="输入姓名" v-model="realname" />
				</view>
				<view class="input-item flex align">
					<view>身份证号</view>
					<input placeholder="输入身份证号" v-model="id_card" />
				</view>
				<view class="input-item flex align">
					<view>电话号码</view>
					<input placeholder="输入电话号码" v-model="mobile" />
				</view>
				<view class="input-item flex align" @click="toShow()">
					<view>性别</view>
					<view :style="sex==''?'color:grey':''">{{sex==''?'点击选择':sexText}}</view>
				</view>
				<view class="input-item flex align">
					<view>流出党支部</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="out_organization_val" :clear-icon="false" :localdata="items_out_org"
							popup-title="请选择流出党支部" @change="onchangeOutOrg"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>流入地</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="in_region_str" :clear-icon="false" :localdata="in_items"
							popup-title="请选择流入地" @change="onchange3"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>详细地址</view>
					<input placeholder="乡镇-村（社区） 街道" v-model="in_address" />
				</view>
				<view class="input-item flex align">
					<view>流入党支部</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="in_organization_val" :custom="true" :clear-icon="false"
							:localdata="items_in_org" popup-title="请选择流入党支部" @change="onchangeInOrg">
							<template>
								<view class="inputBor flex align between">
									<input v-model="in_organization_val_text" placeholder="请选择" readonly disabled />
									<uni-icons type="down" color="#999" size="16"></uni-icons>

								</view>
							</template>
						</uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align" v-if="in_organization_val_text=='其他'">
					<view>其他党支部</view>
					<input placeholder="输入具体党支部或者无" v-model="inorgname" />
				</view>
				<view class="input-item flex align">
					<view>从事行业</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="industry_val" :clear-icon="false" :localdata="jobList"
							popup-title="请选择从事行业" @change="onchange4"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>备注</view>
					<input placeholder="输入备注" v-model="remark" />
				</view>
			</view>
			<!-- 流入申报 -->
			<view class="card" v-if="type==2">
				<view class="input-item flex align">
					<view>类型</view>
					<view>{{type==1?'流出申报':'流入申报'}}</view>
				</view>
				<view class="input-item flex align">
					<view>姓名</view>
					<input placeholder="输入姓名" v-model="realname" />
				</view>
				<view class="input-item flex align">
					<view>身份证号</view>
					<input placeholder="输入身份证号" v-model="id_card" />
				</view>
				<view class="input-item flex align">
					<view>电话号码</view>
					<input placeholder="输入电话号码" v-model="mobile" />
				</view>
				<view class="input-item flex align" @click="toShow()">
					<view>性别</view>
					<view :style="sex==''?'color:grey':''">{{sex==''?'点击选择':sexText}}</view>
				</view>
				<view class="input-item flex align">
					<view>流出地</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="out_region_str" :clear-icon="false" :localdata="out_items"
							popup-title="请选择流出地" @change="onchange2"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>流出党支部</view>
					<input placeholder="输入流出党支部" v-model="outorgname" />
				</view>
				<!-- 			<view class="input-item flex align">
				<view>流出党支部</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker v-model="out_organization_val" :clear-icon="false" :localdata="items_out_org"
						popup-title="请选择流出党支部" @change="onchangeOutOrg"></uni-data-picker>
				</view>
			</view> -->
				<view class="input-item flex align">
					<view>流入党支部</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="in_organization_val" :clear-icon="false" :localdata="items_in_org"
							popup-title="请选择流入党支部" @change="onchangeInOrg"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>从事行业</view>
					<view class="address" style="width: 500rpx;">
						<uni-data-picker v-model="industry_val" :clear-icon="false" :localdata="jobList"
							popup-title="请选择从事行业" @change="onchange4"></uni-data-picker>
					</view>
				</view>
				<view class="input-item flex align">
					<view>备注</view>
					<input placeholder="输入备注" v-model="remark" />
				</view>
			</view>

			<!-- 性别 -->
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
			<view class="resign-btn" @click="toSubmit(1)">提交</view>
			<view class="resign-btn" v-if="typeS==1" style="background:#e26b17;" @click="toSubmit(2)">已返乡</view>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/custom-navbar.vue';
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import {
		organizationList,
		regionLists,
		applyAdd,
		userDetail,
		regionOrganizationLists,
		regionOrganizationOutlists,
		regionOrganizationInlists,
		organizationNewList,
		userBack,
		industryLists
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				realname: '',
				mobile: '',
				address: '',
				in_organization: [],
				out_organization: [],
				items: [],
				out_items: [],
				in_items: [],
				out_region: [],
				in_region: [],
				job: '',
				type: 1,
				sex: '',
				show: false,
				columns: [
					['男', '女']
				],
				sexText: '',
				items_out_org: [],
				items_in_org: [],
				id_card: '',
				remark: '',
				in_organization_val: '',
				out_organization_val: '',
				geoAddress: [],
				district_id: '',
				in_organization_val_text: '',
				last_apply: '',
				out_region_str: '',
				in_region_str: '',
				jobList: [],
				job_id: [],
				industry: [],
				industry_val: '',
				barHeight: '',
				typeS: 1,
				outorgname: '',
				in_address:'',
				inorgname:''
			};
		},
		components: {
			CustomNavbar
		},
		onLoad(option) {
			if (option.typeS) {
				this.typeS = option.typeS
			}
			this.getDetail()
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
			let navBarHeight = ''
			if (systemInfo.platform === 'android') {
				navBarHeight = statusBarHeight + 48; // Android 导航栏高度
			} else {
				navBarHeight = statusBarHeight + 44; // iOS 导航栏高度
			}
			console.log(statusBarHeight)
			console.log(navBarHeight)
			this.barHeight = navBarHeight
		},

		methods: {
			async getIndustry() {
				const result = await industryLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
				})
				this.jobList = result.data
				this.industry = this.last_apply.industry
				if (this.industry.length == 1) {
					this.industry_val = this.industry[0]
				}
				if (this.industry.length == 2) {
					this.industry_val = this.industry[1]
				}
				if (this.industry.length == 3) {
					this.industry_val = this.industry[2]
				}
			},
			confirm(e) {
				console.log('confirm', e)
				this.sexText = e.value[0]
				if (e.value[0] == '男') {
					this.sex = 1
				} else {
					this.sex = 2
				}
				this.show = false
			},
			toShow() {
				this.show = true
				console.log(666)
			},
			async getDetail() {
				const result = await userDetail()
				if (result.code == 1) {
					this.type = result.data.last_apply.type
					this.realname = result.data.last_apply.realname
					this.mobile = result.data.last_apply.mobile
					this.id_card = result.data.last_apply.id_card
					this.sex = result.data.last_apply.sex
					this.sexText = result.data.last_apply.sex_text
					this.remark = result.data.last_apply.remark
					this.last_apply = result.data.last_apply
					this.in_organization_val_text = result.data.last_apply.in_organization_text
					if(result.data.in_address!=null){
						this.in_address = result.data.in_address
					}
					if(result.data.inorgname!=null){
						this.inorgname = result.data.inorgname
					}
					this.getRegion()
					this.getIndustry()
					if (result.data.job != null) {
						this.job = result.data.job
					}
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getRegion() {
				uni.showLoading({
					title: "loading",
					mask: true
				})
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})

				this.out_items = result.data
				this.in_items = result.data
				uni.hideLoading();
				this.getOrganization()
				if (this.type == 1) {
					// this.getLoaction()
					// this.myLocation()
				}
			},
			async getOrganization() {
				uni.showLoading({
					title: "loading",
					mask: true
				})
				const result1 = await organizationNewList({
					parent_id: 738
				})
				result1.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					if (item.children) {
						item.children.forEach(item2 => {
							item2.text = item2.name
							item2.value = item2.id
							if (item2.children) {
								item2.children.forEach(item3 => {
									item3.text = item3.name
									item3.value = item3.id
								})
							}
						})
					}
				})
				const result2 = await organizationNewList({
					parent_id: 737
				})
				result2.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					if (item.children) {
						item.children.forEach(item2 => {
							item2.text = item2.name
							item2.value = item2.id
							if (item2.children) {
								item2.children.forEach(item3 => {
									item3.text = item3.name
									item3.value = item3.id
								})
							}
						})
					}
				})
				if (this.type == 1) {
					this.items_out_org = result1.data
					this.items_in_org = result2.data
					this.out_organization = this.last_apply.out_organization
					if (this.out_organization.length == 1) {
						this.out_organization_val = this.out_organization[0]
					}
					if (this.out_organization.length == 2) {
						this.out_organization_val = this.out_organization[1]
					}
					if (this.out_organization.length == 3) {
						this.out_organization_val = this.out_organization[2]
					}
				} else {
					this.items_out_org = result2.data
					this.items_in_org = result1.data
					this.outorgname = this.last_apply.out_organization_text
				}

				this.in_organization = this.last_apply.in_organization
				if (this.in_organization.length == 1) {
					this.in_organization_val = this.in_organization[0]
				}
				if (this.in_organization.length == 2) {
					this.in_organization_val = this.in_organization[1]
				}
				if (this.in_organization.length == 3) {
					this.in_organization_val = this.in_organization[2]
				}
				if (this.last_apply.out_region.length > 0) {
					this.out_region_str = this.last_apply.out_region[2]
					this.out_region = this.last_apply.out_region
				}
				if (this.last_apply.in_region.length > 0) {
					this.in_region_str = this.last_apply.in_region[2]
					this.in_region = this.last_apply.in_region
				}
				uni.hideLoading();
			},
			onchangeInOrg(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				let text = []
				value.forEach(item => {
					arr.push(item.value)
					text.push(item.text)
				})
				this.in_organization = arr
				this.in_organization_val_text = text[text.length - 1]
				console.log(this.in_organization_val_text)
			},
			onchangeOutOrg(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.out_organization = arr
			},
			onchange2(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.out_region = arr
				uni.hideLoading();
				if (this.type == 1) {
					this.getDang2()
				}
			},
			onchange3(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.in_region = arr
				this.getDang()
			},
			onchange4(e) {
				const value = e.detail.value
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.industry = arr
			},
			async getDang() {
				const result = await regionOrganizationLists({
					region: this.in_region,
					root: 737
				})
				if (result.code == 1) {
					if (result.data.length > 0) {
						console.log(result.data[0])
						this.in_organization = result.data[0]
						let datas = result.data[0]
						if (datas.length == 1) {
							this.in_organization_val = datas[0]
						}
						if (datas.length == 2) {
							this.in_organization_val = datas[1]
						}
						if (datas.length == 3) {
							this.in_organization_val = datas[2]
						}
					} else {
						this.in_organization_val = ''
					}
					this.in_organization_val_text = ''
				}
				uni.hideLoading();

			},
			async getDang2() {
				const result = await regionOrganizationLists({
					region: this.out_region
				})
				if (result.code == 1) {
					uni.hideLoading();
					if (result.data.length > 0) {
						console.log(result.data[0])
						this.out_organization = result.data[0]
						let datas = result.data[0]
						if (datas.length == 1) {
							this.out_organization_val = datas[0]
						}
						if (datas.length == 2) {
							this.out_organization_val = datas[1]
						}
						if (datas.length == 3) {
							this.out_organization_val = datas[2]
						}
					}
				} else {
					uni.hideLoading();
				}

			},
			// 提交申报
			async toSubmit(n) {
				let obj = {
					realname: this.realname,
					id_card: this.id_card,
					mobile: this.mobile,
					sex: this.sex,
					in_region: this.in_region,
					in_organization: this.in_organization,
					industry: this.industry,
					out_region: this.out_region,
					remark: this.remark,
					type: this.type,
					bjtype: 0
				}
				if (this.type == 2) {
					obj.outorgname = this.outorgname
				} else {
					obj.out_organization = this.out_organization
					obj.in_address = this.in_address
					obj.inorgname = this.inorgname
				}
				if (obj.realname == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return false
				}
				if (obj.mobile == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'error'
					})
					return false
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: n == 1 ? '确定要提交吗？' : '是否确定已返乡',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							if (n == 1) {
								that.toConf(obj)
							} else {
								obj.bjtype = 1
								that.toConf(obj)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async toConf(obj) {
				console.log(obj)
				const result = await applyAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					uni.setStorageSync('confirm', false);
					uni.setStorageSync('confirm2', false);
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/apply/record'
						})
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async toConf2() {
				console.log('返乡')
				const result = await userBack()
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					uni.removeStorageSync('confirm')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 00rpx 24rpx 30rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}

				input {
					font-size: 28rpx;
					width: 70%;
				}

				.address {
					view {
						width: 100%;
					}

					.inputBor {
						padding: 10rpx;
						border: solid 1rpx #D9D9D9;
						border-radius: 10rpx;
						width: 95%;

						input {
							width: 90%;
						}
					}
				}


			}
		}

		.resign-btn {
			text-align: center;
			background: #FF9008;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: white;
			padding: 20rpx 0;
			margin: 38rpx auto;
		}

		.typeClass {
			color: #FF9008;
			padding: 0 20rpx 20rpx;
			font-size: 28rpx;
		}
	}
</style>